<!--主页根模板-->
<template>
    <div class="home">
        <el-row>
            <el-col :span="24">
                <el-tabs class="main" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="类目管理" name="0">
                        <div class="tab-item">
                            <el-table
                                    :data="data.appshow_config"
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        prop="code"
                                        label="code"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="isshow"
                                        label="isshow"
                                >
                                    <template scope="scope">
                                        <span>{{ scope.row.isshow ? '显示' : '不显示'}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="name"
                                >
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        width="100">
                                    <template scope="scope">
                                        <el-button type="text" size="small"
                                                   @click="editCategory(scope.$index,scope.row)">
                                            编辑
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="打印配置" name="1">
                        <div class="tab-item">
                            <el-form label-width="200px">
                                <el-form-item label="打印是否加菜单">
                                    <el-switch
                                            v-model="data.print_config.add_menu"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="打印结账单后是否封单">
                                    <el-switch
                                            v-model="data.print_config.seal_bills"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="打印预结单是否封单">
                                    <el-switch
                                            v-model="data.print_config.seal_ps_bills"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="结束账单是否打印账单">
                                    <el-switch
                                            v-model="data.print_config.close_folio"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="修改数量后是否厨打">
                                    <el-switch
                                            v-model="data.print_config.modiordrcnt_print"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="发送后是否打印查询单">
                                    <el-switch
                                            v-model="data.print_config.print_query"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="打印是否退菜单">
                                    <el-switch
                                            v-model="data.print_config.chuck_print"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="退菜是否固定打印机">
                                    <el-switch
                                            v-model="data.print_config.chuck_print_state"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="退菜打印机ip">
                                    <el-input v-model="data.print_config.chuck_ip"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="台位二维码路径">
                                    <el-input v-model="data.print_config.table_qrcode_path"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="支付设置" name="2">
                        <div class="tab-item">
                            <el-form label-width="120px">
                                <h4>微生活配置</h4>
                                <el-form-item label="appid">
                                    <el-input v-model="data.pay_config.acewill.appid" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="appkey">
                                    <el-input v-model="data.pay_config.acewill.appkey" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="shopid">
                                    <el-input v-model="data.pay_config.acewill.shopid" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="cashierid">
                                    <el-input v-model="data.pay_config.acewill.cashierid"
                                              auto-complete="off"></el-input>
                                </el-form-item>

                                <h4>支付宝支付</h4>
                                <el-form-item label="支付宝appid">
                                    <el-input v-model="data.pay_config.alipay.alipay_app_id"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="支付宝公钥">
                                    <el-input v-model="data.pay_config.alipay.alipay_public_key"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="支付宝私钥">
                                    <el-input v-model="data.pay_config.alipay.alipay_private_key"
                                              auto-complete="off"></el-input>
                                </el-form-item>

                                <h4>微信支付</h4>
                                <el-form-item label="公众号id">
                                    <el-input v-model="data.pay_config.wechatpay.wechat_app_id"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="商户号">
                                    <el-input v-model="data.pay_config.wechatpay.wechat_mch_id"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="私钥">
                                    <el-input v-model="data.pay_config.wechatpay.wechat_app_key"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="是否服务商">
                                    <el-switch
                                            v-model="data.pay_config.wechatpay.wechat_provider"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="基本设置" name="3">
                        <div class="tab-item">
                            <el-form label-width="120px">
                                <el-form-item label="CTF地址">
                                    <el-input v-model="data.basic_config.ctf_url" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="app下载地址">
                                    <el-input v-model="data.basic_config.download_url" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="程序路径（food文件夹路径）">
                                    <el-input v-model="data.basic_config.food_path" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="网页点餐地址">
                                    <el-input v-model="data.basic_config.palm_rest_url" auto-complete="off"></el-input>
                                </el-form-item>
                                <span style="color: red">地址格式如: http://127.0.0.1:8080</span>
                                <el-form-item label="电子发票">
                                    <el-input v-model="data.basic_config.invoice_url" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="是否实时上传">
                                    <el-switch
                                            v-model="data.basic_config.rt_data_upload"
                                            on-text="是"
                                            off-text="否">
                                    </el-switch>
                                </el-form-item>
                                <el-form-item label="上传url" v-if="data.basic_config.rt_data_upload">
                                    <el-input v-model="data.basic_config.rt_data_upload_url"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="上传端口号" v-if="data.basic_config.rt_data_upload">
                                    <el-input v-model="data.basic_config.rt_data_upload_port"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="MQ设置" name="4">
                        <div class="tab-item">
                            <el-form label-width="120px">
                                <el-form-item label="topic">
                                    <el-input v-model="data.rocketmq_config.topic" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="namesrvaddr">
                                    <el-input v-model="data.rocketmq_config.namesrvaddr" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="subscribe">
                                    <el-input v-model="data.rocketmq_config.subscribe" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="对外支付接口设置" name="5">
                        <div class="tab-item">
                            <el-button type="success"
                                       @click="addOP" style="margin-bottom: 10px">
                                添加一级
                            </el-button>
                            <div v-for="(item,index) in data.open_payment ">
                                <el-form :inline="true">
                                    <el-form-item label="code">
                                        <el-input v-model="item.code" placeholder="code"></el-input>
                                    </el-form-item>
                                    <el-form-item label="name">
                                        <el-input v-model="item.name" placeholder="name"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="item.show=!item.show">
                                            {{item.show ? '折叠' : '展开'}}
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="danger" @click="delOP(index)">删除</el-button>
                                    </el-form-item>
                                    <el-form-item v-show="item.show">
                                        <el-button type="success" @click="addOPItem(index)">添加二级</el-button>
                                    </el-form-item>
                                </el-form>

                                <el-row style="margin-bottom: 40px" v-show="item.show">
                                    <el-col :span="24" :offset="0">
                                        <el-table :data="item.payment" border style="width: 100%">
                                            <el-table-column prop="code" label="code"></el-table-column>
                                            <el-table-column prop="name" label="name"></el-table-column>
                                            <el-table-column prop="type" label="type"></el-table-column>
                                            <el-table-column prop="tag" label="tag"></el-table-column>
                                            <el-table-column label="操作" width="200">
                                                <template scope="scope">
                                                    <el-button type="danger" size="small"
                                                               @click="delOPItem(index,scope.$index,scope.row)">
                                                        删除
                                                    </el-button>
                                                    <el-button type="primary" size="small"
                                                               @click="editOPItem(index,scope.$index,scope.row)">
                                                        编辑
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="注册" name="7">
                        <div class="tab-item">
                            <el-form label-width="120px">
                                <el-form-item label="注册码">
                                    <el-input v-model="data.registration.app_registration_code" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="打印模板" name="6">
                        <print-model></print-model>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <div class="footer">
            <el-button type="primary" @click="submit">保存</el-button>
        </div>

        <el-dialog title="编辑类目" :visible.sync="dialogFormVisible">
            <el-form :model="categoryForm">
                <el-form-item label="名称">
                    <el-input v-model="categoryForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch
                            v-model="categoryForm.isshow"
                            on-text=""
                            off-text="">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="categorySave">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="对外接口编辑" :visible.sync="dialogFormVisible1">
            <el-form :model="OPForm" label-width="80px">
                <el-form-item label="type">
                    <el-select v-model="OPForm.type" clearable placeholder="请选择类型" @change="resetCode">
                        <el-option
                                v-for="item in OPType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="name">
                    <el-select v-model="OPForm.name" clearable placeholder="请选择类型" @change="setCode">
                        <el-option
                                v-for="item in settingData[OPForm.type]"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="code">
                    <span>{{OPForm.code}}</span>
                </el-form-item>

                <el-form-item label="tag">
                    <el-input v-model="OPForm.tag" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOPItem">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '../api/api';
    import printModel from './print.vue';
    export default {
        data() {
            return {
                activeName: '0',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                data: {
                    "appshow_config": [],
                    "print_config": {
                        "add_menu": true,//打印加菜单 0加菜单 1查询单
                        "seal_bills": true,//打印结账单后是否封单 0不封单  1封单
                        "seal_ps_bills": true,//打印预结单是否封单  0不封单  1封单
                        "close_folio": true,//结束账单是否打印账单   0不打印  1打印
                        "modiordrcnt_print": true,//修改数量后是否厨打   0不打印  1打印
                        "print_query": true,//发送后是否打印查询单   0不打印  1打印
                        "chuck_print": true,//打印退菜单  0不打印  1打印
                        "chuck_print_state": true,//退菜是否固定打印机  0不固定   1固定
                        "chuck_ip": "",//退菜打印机ip
                        "table_qrcode_path": ""//台位二维码路径
                    },
                    "pay_config": {
                        "acewill": {//微生活配置
                            "appid": "",
                            "appkey": "",
                            "shopid": "",
                            "cashierid": ""
                        },
                        "alipay": {//支付宝支付
                            "alipay_app_id": "",   //支付宝appid
                            "alipay_public_key": "",//支付宝公钥
                            "alipay_private_key": ""//支付宝私钥
                        },
                        "wechatpay": {
                            "wechat_app_id": "",//公众号id
                            "wechat_mch_id": "",//商户号
                            "wechat_app_key": "",//私钥
                            "wechat_provider": true //服务商  0不是  1是
                        }
                    },
                    "basic_config": {
                        "ctf_url": "",//CTF地址 http://127.0.0.1:8080
                        "download_url": "",//app下载地址
                        "food_path": "", //程序路径
                        "palm_rest_url": "", //网页点餐路径
                        "invoice_url": "", //电子发票
                        "rt_data_upload": "",// 是否实时上传
                        "rt_data_upload_url": "",//上传url
                        "rt_data_upload_port": ""// 上传端口号
                    },
                    "registration": {
                        "app_registration_code": "" //注册码
                    },
                    "rocketmq_config": {
                        "topic": "",
                        "namesrvaddr": "",
                        "subscribe": ""
                    },
                    "open_payment": [
                        {
                            "code": "",
                            "name": "",
                            "type": "",
                            "tag": ""
                        }
                    ]
                },
                settingData: [],
                //类目
                categoryIndex: 0,
                categoryForm: {
                    "code": "",
                    "isshow": "",
                    "name": ""
                },
                //
                OPForm: {
                    code: '',
                    name: '',
                    type: '0',
                    tag: ''
                },
                OPType: [
                    {
                        value: '0',
                        label: 'actm'
                    },
                    {
                        value: '1',
                        label: 'payment'
                    },
                ],
                pIndex: '',
                index: '',
                isAdd: true
            }
        },
        computed: {},
        methods: {
            handleClick(tab, event) {
                //console.log(tab, event);
            },
            //获取所有配置信息
            getData(){
                api.getData({}, (res) => {
                    let data = res.data;
                    data.open_payment.forEach((item) => {
                        console.log(item)
                        item.show = false;
                    })
                    this.data = data;
                    //console.log(this.data)
                }, (err) => {
                    this.$message.error('获取配置失败');
                })
            },
            //获取对外支付接口列表
            getSettingData(){
                api.getSettingData({}, (res) => {
                    let data = res.data.data;
                    this.settingData[0] = data.actm;
                    this.settingData[1] = data.payment;
                }, (err) => {
                    this.$message.error('获取对外支付配置失败');
                })
            },
            editCategory(index, row){
                this.categoryIndex = index;
                this.categoryForm.code = row.code;
                this.categoryForm.isshow = row.isshow;
                this.categoryForm.name = row.name;
                this.dialogFormVisible = true;
            },
            categorySave(){
                this.data.appshow_config[this.categoryIndex].code = this.categoryForm.code;
                this.data.appshow_config[this.categoryIndex].isshow = this.categoryForm.isshow;
                this.data.appshow_config[this.categoryIndex].name = this.categoryForm.name;
                this.dialogFormVisible = false;
            },

            //对外接口设置
            addOP(){
                this.data.open_payment.push({
                    name: '',
                    code: '',
                    show: false,
                    payment: []
                })
            },
            delOP(index){
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.data.open_payment.splice(index, 1);
                }).catch(() => {

                });
            },
            delOPItem(pIndex, index){
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.data.open_payment[pIndex].payment.splice(index, 1);
                }).catch(() => {

                });

            },
            editOPItem(pIndex, index){
                this.OPForm = {
                    code: this.data.open_payment[pIndex].payment[index].code,
                    name: this.data.open_payment[pIndex].payment[index].name,
                    type: this.data.open_payment[pIndex].payment[index].type,
                    tag: this.data.open_payment[pIndex].payment[index].tag
                };
                this.index = index;
                this.pIndex = pIndex;
                this.isAdd = false;
                this.dialogFormVisible1 = true;
            },
            addOPItem(pIndex){
                this.OPForm = {
                    code: '',
                    name: '',
                    type: '0',
                    tag: ''
                };
                this.index = '';
                this.pIndex = pIndex;
                this.isAdd = true;
                this.dialogFormVisible1 = true;
            },
            resetCode(){
                this.OPForm.code = '';
                this.OPForm.name = '';
            },
            setCode(val){
                this.settingData[this.OPForm.type].forEach((item) => {
                    if (item.name == val) {
                        this.OPForm.code = item.code;
                    }
                })
            },
            saveOPItem(){
                if (this.isAdd) {
                    this.data.open_payment[this.pIndex].payment.push(this.OPForm);
                } else {
                    this.data.open_payment[this.pIndex].payment[this.index].code = this.OPForm.code;
                    this.data.open_payment[this.pIndex].payment[this.index].name = this.OPForm.name;
                    this.data.open_payment[this.pIndex].payment[this.index].type = this.OPForm.type;
                    this.data.open_payment[this.pIndex].payment[this.index].tag = this.OPForm.tag;
                }
                this.dialogFormVisible = false;
            },


            submit(){
                api.postData(this.data, (res) => {
                    console.log(res)
                }, (err) => {
                    this.$message.error('保存失败');
                })
            }
        },
        created () {
            this.getData();
            this.getSettingData();
        },
        components: {
            printModel
        }

    }

</script>

<style scoped lang="scss">
    .tab-item {
        padding: 0 15px 60px 15px;
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid #d1dbe5;
        padding: 10px 10px;
        box-sizing: border-box;
    }

</style>